<template>
  <div class="acount">
    <div class="header flex js-sp bdb-borderBase mg-bt-20">
      <div class="left-num text-left">
        <div class="mb-10">{{ $t("stock.stockAccountValue") }}:</div>
        <div class="text-14 textf-din">
          <span class="textperson-t2 text-bolder">
            {{ $currency(decimalDigitsInputFilter(data?.stock_btc_number, 4)) }}
            BTC
          </span>
          <span class="textperson-t2">
            /{{
              $currency(decimalDigitsInputFilter(data?.stock_usdt_number, 4))
            }}USD
          </span>
        </div>
      </div>
      <div class="left-num text-left"></div>
      <div class="input-center cust-input">
        <el-input
          v-model="state.currency"
          @change="find"
          :placeholder="$t('tips.currencyTip')"
        >
          <template #prefix>
            <img
              style="margin-top:10px;margin-inline-start:5px"
              src="@/assets/images/search.png"
              class="search-icon"
              alt
            />
          </template>
        </el-input>
      </div>
      <div class="right flex js-sp align-center">
        <el-switch
          v-model="state.ishidden"
          active-color="#E54B4B"
          @change="hidden"
          inactive-color="#EAECEF"
        ></el-switch>
        <span class="text-14 persontext-t2 point">
          {{ $t("assets.hideSmallAssets") }}
        </span>
        <el-tooltip
          class="item"
          effect="dark"
          :content="$t('assets.hidden')"
          placement="top"
        >
          <i class="el-icon-warning-outline text-16"></i>
        </el-tooltip>
      </div>
    </div>
    <div class="mg-bt-md flex radius-2 text-center mg-hr-30">
      <div
        class="text-12  pd-tab  point"
        @click="changeActiveTab(1)"
        :class="
          state.activeTab === 1
            ? 'bd-blue share-color blue-bg'
            : 'text-regular  bd-regular'
        "
      >
        {{ $t("fiat.currency") }}
      </div>
      <div
        class="text-12  pd-tab point"
        @click="changeActiveTab(2)"
        :class="
          state.activeTab === 2
            ? 'bd-blue share-color blue-bg'
            : 'text-regular  bd-regular'
        "
      >
        {{ $t("stock.Position") }}
      </div>
    </div>
    <!-- 表格数据 -->
    <div class="table">
      <el-table
        :data="state.tableData"
        header-cell-class-name="eltablebg"
        style="width: 100%"
        v-if="state.activeTab === 1"
      >
        <el-table-column
          prop="currency_name"
          :sortable="true"
          :label="$t('assets.currency')"
        ></el-table-column>
        <el-table-column prop :label="$t('assets.lumpSum')" :sortable="true">
          <template #default="r">
            <span>{{
              $currency(accAdd(r.row.stock_balance, r.row.stock_lock_balance))
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="stock_balance"
          :sortable="true"
          :label="$t('assets.availableBalance')"
        >
          <template #default="r">{{ $currency(r.row.stock_balance) }}</template>
        </el-table-column>
        <el-table-column
          :sortable="true"
          prop="stock_lock_balance"
          :label="$t('assets.orderFreeze')"
        >
          <template #default="r">{{
            $currency(r.row.stock_lock_balance)
          }}</template>
        </el-table-column>
        <!-- <el-table-column
          :sortable="true"
          prop="btc_number"
          width="170"
          :label="$t('assets.BTC_valuation')"
        >
          <template #default="r">
            {{ $currency(dolt(r.row.btc_number)) }}
          </template>
        </el-table-column> -->
        <el-table-column prop :label="$t('assets.operate')" width="270">
          <template #default="r">
            <!-- <span
              class="personlink mr-16 point"
              v-if="r.row.currency_recharge_status"
              @click="recharge(r.row.currency_id)"
              >{{ $t("assets.recharge") }}</span
            >
            <span
              class="personlink mr-16 point"
              @click="cash(r.row.currency_id)"
              v-if="r.row.currency_withdraw_status"
              >{{ $t("assets.withdrawMoney") }}</span
            > -->
            <!-- <span class="personlink mr-16 point" @click="goexchange()">
              {{ $t("assets.toTrade") }}
            </span> -->
            <span
              class="personlink point"
              @click="assetsAccount(r.row.currency_id)"
              >{{ $t("assets.billingDetails") }}</span
            >
          </template>
        </el-table-column>
        <template #empty>
          <Norecord />
        </template>
      </el-table>
      <el-table
        v-loading="state.loading"
        :data="state.tableData"
        header-cell-class-name="eltablebg"
        style="width: 100%"
        v-if="state.activeTab === 2"
      >
        <el-table-column prop="currency_name">
          <template #header>
            <el-dropdown trigger="click" @command="menuCommand">
              <span class="el-dropdown-link">
                {{ $t("stock.stock") }}{{ state.status
                }}<i class="el-icon-caret-bottom text-16 ml-5"></i>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="-1">{{
                    $t("financial.all")
                  }}</el-dropdown-item>
                  <el-dropdown-item command="1">US</el-dropdown-item>
                  <el-dropdown-item command="2">HK</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
          <template #default="r">
            <span>{{ r.row.stock_name + "/" + r.row.stock_code }}</span>
          </template>
        </el-table-column>
        <el-table-column prop :label="$t('stock.Position')" :sortable="true">
          <template #default="r">
            <span>{{ $currency(r.row.total_amount) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="stock_balance"
          :sortable="true"
          :label="$t('stock.lock')"
        >
          <template #default="r">{{ $currency(r.row.block_amount) }}</template>
        </el-table-column>
        <el-table-column prop :label="$t('assets.operate')" width="270">
          <template #default="r">
            <span
              class="personlink point"
              @click="assetsStockAccountId(r.row.stock_id)"
              >{{ $t("assets.billingDetails") }}</span
            >
          </template>
        </el-table-column>
        <template #empty>
          <Norecord />
        </template>
      </el-table>
      <Pagination
        v-if="state.activeTab === 2"
        :total="state.total"
        :size="state.listParam.limit"
        :current="state.currentPage"
        @currentchange="currentchange"
      />
    </div>
  </div>
</template>

<script>
import { onMounted, reactive } from "vue";
import Norecord from "@/components/noRecord/NoRecord.vue";
import { useRouter } from "vue-router";
import { decimalDigitsInputFilter, transferToNumber } from "@/utils/common";
import { accAdd } from "@/utils/calculation";
import { stockOrderPageHold } from "@/api/stock";
import { demostockOrderPageHold } from "@/api/demo";
import UseSystemSetting from "@/commonapi/useSystemSetting";
import Pagination from "@/components/pagination/index.vue";
import { useI18n } from "vue-i18n";

export default {
  name: "Bibiacount",
  props: { data: Object },
  emits: ["assetsAccount", "assetsStockAccount"],
  components: { Norecord, Pagination },
  setup(props, { emit }) {
    const { t } = useI18n();
    const state = reactive({
      currency: "",
      ishidden: false,
      dialogVisible: false,
      tableData: [],
      account: [],
      listParam: {
        page: 0,
        limit: 10,
      },
      currentPage: 1,
      activeTab: 1,
      total: 0,
      loading: false,
      status: t("financial.all"),
    });
    // console.log("s", props.data);
    // 获取开关状态
    const { virtual_wallet } = UseSystemSetting();
    /**
     * methods
     */
    const $router = useRouter();
    onMounted(() => {
      if (props.data) {
        state.tableData = props.data.wallet_stock_list;
      }
    });
    const menuCommand = (val) => {
      if (val > -1) {
        if (val == 1) {
          state.status = "US";
        } else {
          state.status = "HK";
        }
      } else {
        state.status = t("financial.all");
      }
      state.listParam.stock_type = val;
      state.currentPage = 1;
      state.total = 0;
      getList();
    };
    const changeActiveTab = (val) => {
      state.activeTab = val;
      state.currentPage = 1;
      state.status = t("financial.all");
      state.listParam.stock_type = -1;
      if (val === 1 && props.data) {
        state.tableData = props.data.wallet_stock_list;
      }
      if (val === 2) {
        state.total = 0;
        getList();
      }
    };
    const getList = () => {
      const param = { ...state.listParam };
      param.page = state.currentPage - 1;
      param.stock_type =
        state.listParam.stock_type === -1 ? null : state.listParam.stock_type;
      state.loading = true;
      let setFun = virtual_wallet.value
        ? demostockOrderPageHold
        : stockOrderPageHold;
      setFun(param).then((res) => {
        state.loading = false;
        state.tableData = [...res.data.items];
        state.total = res.data.total;
      });
    };
    // 跳转到新页面
    const currentchange = (val) => {
      state.currentPage = val + 1;
      getList();
    };
    // 隐藏小额资产
    const hidden = (val) => {
      if (val) {
        state.tableData = props.data.wallet_stock_list.filter((item) => {
          return item.btc_number > 0.001;
        });
      } else {
        state.tableData = props.data.wallet_stock_list;
      }
    };
    // 账单明细
    const assetsAccount = (id) => {
      emit("assetsAccount", id);
    };
    //股票账单明细
    const assetsStockAccountId = (id) => {
      let obj = {
        id: id,
        active: state.activeTab,
      };
      emit("assetsStockAccount", obj);
    };
    // 查询币种
    const find = (val) => {
      state.tableData = props.data.wallet_stock_list.filter((item) => {
        return item.currency_name.includes(val);
      });
    };
    // 点击充值
    const recharge = (id) => {
      $router.push("/person/recharge?id=" + id);
    };
    // 点击提现
    const cash = (id) => {
      $router.push("/person/cash?id=" + id);
    };
    // 点击去交易
    const goexchange = () => {
      $router.push("/wealthstock");
    };
    const dolt = (val) => {
      return transferToNumber(val);
    };
    return {
      state,
      hidden,
      find,
      assetsAccount,
      recharge,
      cash,
      goexchange,
      decimalDigitsInputFilter,
      accAdd,
      dolt,
      getList,
      currentchange,
      changeActiveTab,
      menuCommand,
      assetsStockAccountId,
    };
  },
};
</script>

<style lang="less" scoped>
.acount {
  width: 100%;
}
.header {
  padding: 20px 30px;
  box-sizing: border-box;
}
.mb-10 {
  margin-bottom: 10px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-6 {
  margin-bottom: 6px;
}
.mr-16 {
  margin-inline-end: 16px;
}
.textf-din {
  font-family: DINPro;
}
.up {
  min-width: 58px;
  padding: 0 5px;
  height: 22px;
  line-height: 20px;
  margin-inline-start: 17px;
}
.right {
  min-width: 157px;
}
.table {
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
}

// 账单明细
.detail {
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
}

.single {
  width: 100%;
  padding: 0 0 20px;
  box-sizing: border-box;
}
.single-line {
  li {
    width: 33%;
  }
}
.cust-input/deep/ .el-input--prefix .el-input__inner {
  padding-inline-start: 40px;
  box-sizing: border-box;
}
.pd-tab {
  padding: 2px 12px;
}
</style>
